<template>

  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="2">
            <div @click="home" style="background: red;font-family: serif;">News CMS</div>
          </el-col>
          <el-col :span="2" :push="20">
            <div style="justify-content: center;align-items: center; position: relative;">
              <el-dropdown>
              <span class="el-dropdown-link">
                登录/注册
                <el-icon class="el-icon--right">
                  <arrow-down/>
                </el-icon>
               </span>

                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="login">登录</el-dropdown-item>
                    <el-dropdown-item @click="register">注册</el-dropdown-item>
                  </el-dropdown-menu>
                </template>

              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </el-header>

      <el-main style="height:100%;">
        <router-view></router-view>
        <el-backtop :right="100" :bottom="100"/>
      </el-main>

    </el-container>
  </div>


</template>

<script setup>
import {useRouter} from 'vue-router'

const router = useRouter()

let home = () => {
  router.push('/')
}

let login = () => {
  router.push('/user_login')
}

let register = () => {
  router.push('/register')
}

</script>

<style scoped>

.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 100%;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}


</style>